<template>
  <div>
    <div
      class="load"
      v-if="!onload"
      :style="{ top: `${top}px`, left: `${left}px` }"
    >
      正在加载中...请稍等。
    </div>
    <div
      class="userinfo_wrapper"
      :style="{
        top: `${top}px`,
        left: `${left}px`,
        opacity: opacity,
      }"
      @mouseenter="show"
      @mouseleave="hidden"
      ref="userinfowrap"
    >
      <div class="userinfo_content">
        <div
          class="bg"
          :style="{ backgroundImage: `url('/static/video/userinfo_bg.webp')` }"
        ></div>
        <a class="face">
          <img src="/static/video/atup_avatar3.webp" />
          <div class="verify_box type_0"></div>
        </a>
        <div class="info">
          <p class="user">
            <a href="" class="name vip" style="color: rgb(251, 114, 153)"
              >yoo一凡</a
            >
            <a href="">
              <img src="/static/video/level_6.png" class="level" />
            </a>
            <span class="vip_label">
              <span class="label_size"></span>
            </span>
          </p>
          <p class="social">
            <a href="">
              <span class="follow">113</span>
              <span class="label">关注</span>
            </a>
            <a href="">
              <span class="fans">20.5万</span>
              <span class="label">粉丝</span>
            </a>
            <span>
              <span class="like">126.7万</span>
              <span class="label">获赞</span>
            </span>
          </p>
          <p class="verify_desc">
            <i class="verify_icon type_0"></i>
            <span
              >bilibili个人认证：2021年度巅峰主播、bilibili
              知名虚拟UP主、直播高能主播</span
            >
          </p>
          <p class="sign">
            主业人妻，副业直播，萌宠区UP主。 商务合作VX：CMAAA0
          </p>
        </div>
        <div class="btn_box">
          <a href="" class="like liked">
            <span>已关注</span>
            <!-- <span>关注</span> -->
          </a>
          <a href="" class="message">发信息</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      $userinfowrap: null,
      onload: false, //加载完毕
      opacity: 0,
    };
  },
  mounted() {
    // 通过uid获取个人信息
    this.$nextTick(() => {
      this.$userinfowrap = this.$refs.userinfowrap;
      this.$emit("loadend", this.$userinfowrap.offsetHeight);
      this.opacity = 1;
      this.onload = true;
    });
  },
  props: {
    top: {
      typeof: Number,
      required: true,
    },
    left: {
      typeof: Number,
      required: true,
    },
    // 通过uid获取用户信息
    uid: {
      typeof: String,
      required: true,
    },
  },
  methods: {
    show() {
      this.$emit("show");
    },
    hidden() {
      this.$emit("hidden");
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  outline: none;
}
.load {
  width: 366px;
  position: absolute;
  z-index: 9999;
  box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
  background-color: #fff;
}
.userinfo_wrapper {
  position: absolute;
  z-index: 9999;
  box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}
.userinfo_content {
  font-size: 12px;
  width: 366px;
  background-color: #fff;
  position: relative;
  color: #6d757a;
  .bg {
    position: absolute;
    width: 366px;
    height: 85px;
    top: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
  }
  .face {
    position: absolute;
    left: 10px;
    top: 95px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    & > img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .info {
    padding: 97px 20px 16px 70px;
    .user {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      height: 21px;
      .name {
        color: #222;
        &.vip {
          color: #fb7299;
        }
      }
    }
    .social {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      a {
        color: #18191c;
      }
      .label {
        margin-right: 18px;
        display: inline-block;
        margin-left: 3px;
        color: #9499a0;
      }
    }
    .verify_desc {
      font-size: 12px;
      line-height: 17px;
      color: #9499a0;
      margin-bottom: 10px;
      .verify_icon {
        width: 14px;
        height: 14px;
        margin-right: 2px;
        display: inline-block;
        vertical-align: sub;
        &.type_0 {
          background-image: url("/static/video/type_0.png");
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
    .sign {
      line-height: 16px;
      color: #9499a0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .level {
      width: 21px;
      margin: 0 4px;
    }
    .vip_label {
      color: #fff;
      display: inline-block;
      box-sizing: border-box;
      max-width: 58px;
      height: 16px;
      background-color: #f69;
      border-radius: 2px;
      line-height: 16px;
      font-size: 12px;
      font-weight: 400;
      margin-left: 0;
      overflow: hidden;
      white-space: nowrap;
      .label_size {
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: center;
        transform: scale(0.83);
      }
    }
    p {
      margin: 0;
      color: #222;
      line-height: 12px;
    }
  }
  .btn_box {
    padding: 0 0 16px 70px;
    display: flex;
    & > a {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 100px;
      height: 30px;
      border: 1px solid #ccd0d7;
      margin-right: 8px;
      border-radius: 3px;
      color: #61666d;
      transition: all 0.3s;
      font-size: 14px;
      background-color: #fff;
      cursor: pointer;
      &.like {
        font-weight: 400;
        color: #fff;
        border-color: #00a1d6;
        background-color: #00a1d6;
      }
      &.liked {
        background-color: #e5e9ef;
        border-color: #e5e9ef;
        color: #6d757a;
      }
      & > span {
        display: inline-block;
      }
    }
  }
}
.verify_box {
  width: 14px;
  height: 14px;
  background-color: #fff;
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 34px;
  right: 0;
  border-radius: 50%;
  &.type_0 {
    background-image: url("/static/video/type_0.png");
  }
}
</style>